<template>
	<div id="app">
		<div class="chazhao">
			<div class="title">首页</div>
			<div class="input">

				<input type="text" placeholder="请输入内容查找">
			</div>
		</div>
		<div class="qqq"></div>
		<div class="aaa"></div>
		<section>
			<div class="item" @click="details" v-for="(item,index) in $store.state.commodity">
				<img :src="item.image"></img>
				<span>{{item.description}}</span>
				<div class="biaoqian">
					<div class="b-1">{{item.title}}</div>
					<!-- <div class="b-2">正品保障</div> -->
				</div>
				<div class="jiage">
					<div class="text">
						<div class="text1">￥{{item.price}}</div>
						<!-- <div class="text2">￥170</div> -->
					</div>
					<van-icon name="add" color="#1ba4f0" size="20"></van-icon>
				</div>
			</div>
		</section>
	</div>
</template>

<script>
	import {
		Icon
	} from 'vant'
	export default {
		data() {
			return {

			}
		},
		methods: {
			details() {
				this.$router.push('/commodity')
			}
		},
		created() {
			console.log(this.$store.state.commodity)
			const commodity = this.$store.state.commodity

		},
		components: {
			[Icon.name]: Icon
		},

	}
</script>
<style lang="less" scoped>
	@themeColor: #1ba4f0;
	@backColor: #f5f5f5;

	@shenglue: {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}



	#app {
		min-height: 100vh;
		background-color: @backColor;

		.chazhao {
			width: 100vw;
			height: 25vw;
			background-color: @themeColor;
			display: flex;
			flex-direction: column;
			align-items: center;
			color: #fff;
			position: fixed;
			top: 0;
			z-index: 9999999999999;

			.title {
				font-size: 18px;
				margin-top: 5vw;
			}

			.input {
				margin-top: 5px;
				width: 90vw;
				height: 30px;
				background-color: #fff;
				border-radius: 15px;
				display: flex;
				justify-content: center;

				&>input {
					width: 100%;
					height: 100%;
					border-radius: 15px;
					border: none;
					text-align: center;
				}
			}
		}

		.qqq {
			height: 25vw;
		}

		.aaa {
			width: 100vw;
			height: 5vw;
			background-color: @themeColor;
		}

		section {
			width: 100vw;
			// min-height: 100vh;
			background-color: @backColor;
			border-top-right-radius: 15px;
			border-top-left-radius: 15px;
			position: relative;
			top: -15px;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			padding: 5px;

			&>.item {
				width: 45vw;
				height: 185px;
				border-radius: 10px;
				background: #fff;
				display: flex;
				flex-direction: column;
				box-sizing: border-box;
				padding: 5px;
				// border: 1px solid #ccc;
				margin-bottom: 20px;

				img {
					width: 100%;
					height: 100px;
					background-color: @backColor;
				}

				span {
					width: 100%;
					font-size: 16px;
					color: rgba(51, 51, 51, .8);
					@shenglue()
				}

				.biaoqian {
					display: flex;
					font-size: 10px;

					.b-1 {
						padding: 2px;
						border-radius: 2px;
						background-color: rgba(27, 164, 240, .1);
						color: @themeColor;
					}

					.b-2 {
						padding: 2px;
						border-radius: 2px;
						background-color: rgba(247, 166, 12, .1);
						color: #f0ad16;
						margin-left: 3px;
					}
				}

				.jiage {
					margin-top: 5px;
					display: flex;
					justify-content: space-between;

					.text {
						display: flex;

						.text1 {
							color: red;
							font-weight: 700;

						}

						.text2 {
							color: rgba(16, 16, 16, .6);
							margin-left: 5px;
							text-decoration: line-through;
						}
					}
				}
			}
		}
	}
</style>
